feat: `Joints` implementation #150

Neosoulink · 2024-11-20T00:16:21Z

Summary

This PR introduces the Joints feature.

Joints are one of the advanced features natively available in Rapier.
This PR provides an easy, basic but robust way to deal with it.

Logs

Support for Joint types:
- "fixed" | "spring" | "rope" | "generic" | "spherical" | "prismatic" | "revolute"
New components based on the supported joint types (FixedJoint, SphericalJoint, ...)

How to use

Here's a basic implementation example:

<RigidBody
  v-for="(ref, i) in bodyRefs"
  :key="i"
  :ref="ref"
  :type="i === 0 ? 'kinematic' : 'dynamic'"
  :position="[i * 1.5, 0, 0]"
   collider="ball"
 >
  <TresMesh>
    <TresSphereGeometry />
    <TresMeshNormalMaterial />
  </TresMesh>
</RigidBody>

<SphericalJoint
  v-for="(ref, i) in bodyRefs"
  :key="i"
  :bodies="[ref.value?.[0]?.instance, bodyRefs[i - 1]?.value?.[0]?.instance]"
  :params="[
    [-1.1, 0, 0],
    [1.1, 0, 0],
  ]"
/>

Preview

Screen.Recording.2024-11-20.at.2.10.27.AM.mov

Will close #108

Neosoulink · 2024-12-09T14:08:53Z

Hi @alvarosabu, I just added a base documentation for Joint.
I'd appreciate having your review of it (the Joint implementation in general).

cc: @JaimeTorrealba

- Init joint component - Add `JointProps` interface - Add Joint Demo

Neosoulink · 2025-01-07T17:56:03Z

Any update on this one?

This PR is waiting for review

JaimeTorrealba

I like the implementation, But also I would add a composable WDYT? With the same logic

an useJoint() or similar so the people is not force to use it with Tres.js components only

.vscode/settings.json

JaimeTorrealba · 2025-01-11T19:06:48Z

docs/components/joint.md

+
+Joints is an extension feature provided in [Rapier#Joint](https://rapier.rs/docs/user_guides/javascript/joints/). It lets us connect two or more bodies, restricting their movements according to each other.
+
+In **Tres** we can achieve such motion restriction by using one of the available components designed to handle joints:


Small one but maybe we need consistency here it all pages should be "Tres.js"

JaimeTorrealba · 2025-01-11T19:08:42Z

docs/components/joint.md

+
+<template>
+  <RigidBody
+    v-for="(ref, i) in bodyRefs"


I got a problem, the mental load of this example is high. I would instead, in this page, come with a very basic example, just two rigid Bodies joined (just that). The idea here is that they learn how to use it.

This example reflects the one in the playground (the JointsDemo example)...
Is it okay to simplify this one in this documentation but keep the demo as it is?

JaimeTorrealba · 2025-01-11T19:09:38Z

playground/src/pages/basics/JointsDemo.vue

+  Array.from({ length: 10 }).map(() => shallowRef<ExposedRigidBody>(null)),
+)
+
+setInterval(() => {


Why setInterval?

And if you decided to use setInterval, please remember to clear the interval in the onUnmouted

Oh yeah, you're right,

setInterval was used to update the rotation of the first and have that whip effect

JaimeTorrealba · 2025-01-11T19:13:00Z

src/components/joints/BaseJoint.vue

+  }
+
+  if (hasParamsError) {
+    throw new Error(`Invalid "${type}" joint parameters`)


Maybe too difficult, but could be said what parameters have problems?

Sure, maybe a string containing the requirement or why it the error occurs

Neosoulink · 2025-01-11T21:17:12Z

I like the implementation, But also I would add a composable WDYT? With the same logic

an useJoint() or similar so the people is not force to use it with Tres.js components only

I think it possible even to have both features

JaimeTorrealba · 2025-01-11T21:32:07Z

I like the implementation, But also I would add a composable WDYT? With the same logic
an useJoint() or similar so the people is not force to use it with Tres.js components only

I think it possible even to have both features

Completely, maybe another PR to be more organized.

### Description - Make the Joint component listen to updates - Provide more precise `Joint` error messages - Simplify the Joint example and the Joint documentation - Remove `cSpell.words` VsCode setting

Neosoulink · 2025-01-13T19:03:40Z

Completely, maybe another PR to be more organized.

I pushed the changes requested, and yes, this will be part of a separate PR ✅

Here what has changed:

c1a6ffd1769b6a872c48a42bcd54bf02333658e1
- Make the Joint component listen to updates
- Provide more precise Joint error messages
- Simplify the Joint example and the Joint documentation
- Remove cSpell.words VsCode setting

alvarosabu · 2025-01-20T15:10:00Z

docs/components/joint.md


 ```vue
-<script setup lang="ts">
+<script setup>


Hi @Neosoulink examples should be in Typescript as much as possible:

alvarosabu · 2025-01-20T15:18:11Z

docs/components/joint.md

@Neosoulink you need to add the entry on docs/.vitepress/config so it's available on the side navigation

alvarosabu · 2025-01-20T15:20:18Z

docs/components/joint.md

    ]"
  />
 </template>
 ```

 > Preview
-<img width="843" alt="Screenshot 2024-12-09 at 4 01 58PM" src="https://github.com/user-attachments/assets/9baaea58-f996-45d5-b4f4-34dae30d44cb">
+<img width="1141" alt="JointsDemo" src="https://github.com/user-attachments/assets/d3cacac3-8764-4906-886a-d0b7a764b7c0" />


@Neosoulink Why not using the normal markdown image notation for this?

![JointsDemo](https://github.com/user-attachments/assets/d3cacac3-8764-4906-886a-d0b7a764b7c0)

It was automatically added from github, but let make it clean. I'm going to update it

alvarosabu · 2025-01-20T15:21:04Z

docs/components/joint.md


 ### Explanation

-In the above example, we created a list of 10 `RigidBody` references and mapped them using the `v-for` directive. Then, we implemented the `SphericalJoint` component, creating a Joint between each mapped `RigidBody`.
+In the above example, we created 2 `RigidBody` references, then, we implemented the `SphericalJoint` component, by placing our 2 `RigidBody` references in the `:bodies` property and specifying parameters, we created a `spherical-joint` between them.


we created two RigidBody references

alvarosabu · 2025-01-20T15:30:04Z

src/components/joints/index.ts

Hi @Neosoulink if I understand correctly the scope of this file is to generate several components using BaseJoint.vue as a base, but why? Why not just directly create the SFC components per kind of joint? They are only 7

This is an unusual pattern for vue that we don't use anywhere else in the ecosystem, I will strongly suggest we just separate this into different Joint components.

You could even just have one Join component and pass a prop defining the type and having <component :is="AnyJointComponent" /> under the hood.

Let me know if I can support you with this one.

This approach prioritizes re-usability based on the same component.
In other words, it's just a shortcut for the Joints

It's exactly the same as doing:

<Joint type="joint-type" />

What makes it efficient (in my point of view) is that there is only one source of truth, one part dealing with the main feature and other parts extending from it.
Plus, the child components can have props type precisions and be aware of what the parent needs for the props

I often used to implement a few years ago, back in 2019 (old goods days 🥲)
It's a pattern I discovered while learning how Vue was working under the hood

Neosoulink requested a review from JaimeTorrealba November 20, 2024 00:16

Neosoulink self-assigned this Nov 20, 2024

Neosoulink requested a review from alvarosabu as a code owner November 20, 2024 00:16

Neosoulink marked this pull request as draft November 20, 2024 00:19

Neosoulink marked this pull request as ready for review December 9, 2024 14:05

Neosoulink added enhancement New feature or request feature p3-significant High-priority enhancement (priority) labels Dec 10, 2024

Neosoulink added 7 commits December 12, 2024 19:11

feat(core): base joint integration

2137ae8

- Init joint component - Add `JointProps` interface - Add Joint Demo

feat(core): add rope & spherical joint types

37096db

feat(core): add common object types

cebe338

feat(playground): implement spherical joint demo

d5e58d6

feat(core): implement all the supported Joints

93965e1

style(core): use spaces

c531dfa

docs: add Joint base documentation

8c4afea

Neosoulink force-pushed the feat/joints branch from 683f466 to 8c4afea Compare December 12, 2024 17:11

chore(setting): minor correct

5b89fee

JaimeTorrealba requested changes Jan 11, 2025

View reviewed changes

JaimeTorrealba reviewed Jan 11, 2025

View reviewed changes

refactor: apply @JaimeTorrealba request changes

c1a6ffd

### Description - Make the Joint component listen to updates - Provide more precise `Joint` error messages - Simplify the Joint example and the Joint documentation - Remove `cSpell.words` VsCode setting

Neosoulink requested a review from JaimeTorrealba January 13, 2025 18:59

JaimeTorrealba approved these changes Jan 13, 2025

View reviewed changes

Merge branch 'main' into feat/joints

778d943

alvarosabu requested changes Jan 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: `Joints` implementation #150

feat: `Joints` implementation #150

Neosoulink commented Nov 20, 2024 •

edited

Loading

Neosoulink commented Dec 9, 2024

Neosoulink commented Jan 7, 2025

JaimeTorrealba left a comment

JaimeTorrealba Jan 11, 2025

Neosoulink Jan 11, 2025

JaimeTorrealba Jan 11, 2025

Neosoulink Jan 13, 2025

JaimeTorrealba Jan 11, 2025

Neosoulink Jan 11, 2025

JaimeTorrealba Jan 11, 2025

Neosoulink Jan 13, 2025

Neosoulink commented Jan 11, 2025

JaimeTorrealba commented Jan 11, 2025

Neosoulink commented Jan 13, 2025

alvarosabu Jan 20, 2025

Neosoulink Jan 20, 2025

alvarosabu Jan 20, 2025

Neosoulink Jan 20, 2025

alvarosabu Jan 20, 2025

Neosoulink Jan 20, 2025

alvarosabu Jan 20, 2025 •

edited

Loading

alvarosabu Jan 20, 2025

Neosoulink Jan 20, 2025 •

edited

Loading


		Joints is an extension feature provided in [Rapier#Joint](https://rapier.rs/docs/user_guides/javascript/joints/). It lets us connect two or more bodies, restricting their movements according to each other.

		In Tres we can achieve such motion restriction by using one of the available components designed to handle joints:

feat: Joints implementation #150

Are you sure you want to change the base?

feat: Joints implementation #150

Conversation

Neosoulink commented Nov 20, 2024 • edited Loading

Summary

Logs

How to use

Neosoulink commented Dec 9, 2024

Neosoulink commented Jan 7, 2025

JaimeTorrealba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Neosoulink commented Jan 11, 2025

JaimeTorrealba commented Jan 11, 2025

Neosoulink commented Jan 13, 2025

Here what has changed:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alvarosabu Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Neosoulink Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

feat: `Joints` implementation #150

feat: `Joints` implementation #150

Neosoulink commented Nov 20, 2024 •

edited

Loading

alvarosabu Jan 20, 2025 •

edited

Loading

Neosoulink Jan 20, 2025 •

edited

Loading